import React, { useState, useRef } from 'react';
import { Form } from 'antd';
import type { FormInstance } from 'antd/lib/form';
import DynamicForm from '../DynamicForm';
import FloatCard from '../FloatCard';
import type { FormConfig } from '../DynamicForm';
import SelectedFilterTags from '../SelectedFilterTags';
import styles from './Index.module.less'; // 引入样式模块

interface FilterFormProps {
  isFloating?: boolean;
  formConfig: FormConfig;
  isShowFilterTags?: boolean;
}
/**
 * 合并了表单和列表功能的页面组件
 */
const FilterForm: React.FC<FilterFormProps> = ({ isFloating = false, formConfig, isShowFilterTags = true }) => {
  // 内部状态管理已选条件
  const [selectedValues, setSelectedValues] = useState<Record<string, unknown> | null>(null);
  // 创建表单实例，用于同步表单状态
  const [form] = Form.useForm(formConfig.form);
  // 保存原始的formConfig.onReset方法
  const originalOnReset = formConfig.onReset;
  
  // 创建新的formConfig，重写onSubmit方法
    const enhancedFormConfig: FormConfig = {
      ...formConfig,
      form,
      // 重写onSubmit方法，实现内部过滤非空值
      onSubmit: (values: Record<string, unknown>) => {
        // 过滤出非空值
        const filteredValues: Record<string, unknown> = {};
        Object.entries(values).forEach(([key, value]) => {
          if (value !== undefined && value !== null && value !== '' && (
            !Array.isArray(value) || value.length > 0
          )) {
            filteredValues[key] = value;
          }
        });
        
        // 更新内部状态
        setSelectedValues(filteredValues);
        
        // 调用原始的onSubmit方法
        if (formConfig.onSubmit) {
          formConfig.onSubmit(filteredValues);
        }
      },
      onReset: () => {
        // 通过表单实例重置所有字段
        form.resetFields();
        // 清空内部状态
        setSelectedValues(null);
        // 调用原始的onReset方法（如果有）
        if (originalOnReset) {
          originalOnReset();
        }
      },
    };
    
    // 内部实现移除条件的方法
    const onRemoveCondition = (fieldName: string) => {
      // 更新内部状态
      setSelectedValues(prevValues => {
        if (!prevValues || !prevValues[fieldName]) {
          return prevValues;
        }
        
        const newValues = { ...prevValues };
        delete newValues[fieldName];
        return Object.keys(newValues).length > 0 ? newValues : null;
      });
      
      // 通过表单实例重置对应字段
      form.setFieldsValue({ [fieldName]: undefined });
    };
    
    // 内部实现重置方法
    const handleReset = () => {
      // 通过表单实例重置所有字段
      form.resetFields();
      // 清空内部状态
      setSelectedValues(null);
    };
  
  return (
    <div className={styles.wrapper}>
      <FloatCard isFloating={isFloating} style={{}}>
        <DynamicForm {...enhancedFormConfig} />
      </FloatCard>
      {/* 已选条件标签 */}
      {isShowFilterTags && selectedValues && Object.keys(selectedValues).length > 0 && <SelectedFilterTags
        selectedValues={selectedValues}
        items={formConfig.items}
        onRemoveCondition={onRemoveCondition}
        onReset={handleReset}
      ></SelectedFilterTags>}
    </div>
  );
};

export default FilterForm;